<template>
  <!-- 商品列表 -->
  <ul class="list banxin">
    <li
      v-for="item in arr"
      :key="item.id"
      @click="$router.push(`/details/${item.id}`)"
    >
      <img
        height="250px"
        width="100%"
        :src="'http://sc.wolfcode.cn' + item.coverImg"
        alt=""
      />
      <div class="title">{{ item.name }}</div>
      <div class="jifen">
        {{ item.coin }}
        <span
          ><img width="20" src="../assets/images/home/monad.png" alt=""
        /></span>
      </div>
      <div class="btn">立即兑换</div>
      <img
        class="hot"
        v-show="item.isHotSale == 1"
        src="../assets/images/home/hot-j.png"
        alt=""
      />
      <img
        class="hot"
        v-show="item.isLatest == 1"
        src="../assets/images/home/new-j.png"
        alt=""
      />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["arr"],
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 285px;
    background-color: #fff;
    margin: 0 20px 20px 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
    &:hover {
      transform: translateY(-20px);
      .btn {
        background: #0a328e;
        color: #fff;
      }
      transition: 0.5s;
    }
    .title {
      margin-top: 22px;
      height: 18px;
      font-size: 18px;
      font-weight: 300;
      color: #333333;
      text-align: center;
      margin-bottom: 24px;
    }
    .jifen {
      font-size: 18px;
      font-weight: bold;
      color: #fd604d;
      text-align: center;
      margin-bottom: 22px;
      display: flex;
      justify-content: center;
      span {
        margin-left: 6px;
      }
    }
    .btn {
      width: 100px;
      height: 36px;
      margin: auto;
      border: 1px solid #0a328e;
      font-size: 18px;
      text-align: center;
      line-height: 36px;
      font-weight: 300;
      color: #0a328e;
      margin-bottom: 32px;
    }
    .hot {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>